﻿<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="calendar.aspx.vb" Inherits="bookmeetprototype.calendar" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>My BookMeet Calendar</title>
		<meta name="description" content="bookmeet's calendar: plan your book meetings here" />
		<meta name="keywords" content="responsive, calendar, asp.net, accdb, jquery, plugin, full page, flexible, javascript, css3, media queries" />
		<meta name="author" content="Adam James Bull" />
        <meta name="co-author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico"> 
		<link rel="stylesheet" type="text/css" href="Styles/calendar.css" />
		<link rel="stylesheet" type="text/css" href="Styles/custom_2.css" />
		<script src="Scripts/modernizr.custom.63321.js"></script>
 <style>
 body 
 {
      background: transparent;
    background-image:url("/img/two.jpg");
      -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat:repeat;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="container">	
			
			<header class="clearfix">
				<span><asp:HyperLink ID="BackToHome" runat="server" NavigateUrl="~/Default.aspx" 
                        Height="25px" ImageUrl="~/img/bookmeetsmall.png" Width="114px"><asp:Image ID="Image1" runat="server"></asp:Image></asp:HyperLink>
                    </span>
			</header>
			<section class="main">
				<div class="custom-calendar-wrap">
					<div id="custom-inner" class="custom-inner">
						<div class="custom-header clearfix">
							<nav>
								<span id="custom-prev" class="custom-prev"></span>
								<span id="custom-next" class="custom-next"></span>
							</nav>
							<h2 id="custom-month" class="custom-month"></h2>
							<h3 id="custom-year" class="custom-year"></h3>
						</div>
						<div id="calendar" class="fc-calendar-container"></div>
					</div>
				</div>
			</section>
		</div><!-- /container -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="Scripts/jquery.calendario.js"></script>
		<script type="text/javascript" src="Scripts/data.js"></script>
		<script type="text/javascript">
		    $(function () {

		        var transEndEventNames = {
		            'WebkitTransition': 'webkitTransitionEnd',
		            'MozTransition': 'transitionend',
		            'OTransition': 'oTransitionEnd',
		            'msTransition': 'MSTransitionEnd',
		            'transition': 'transitionend'
		        },
					transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
					$wrapper = $('#custom-inner'),
					$calendar = $('#calendar'),
					cal = $calendar.calendario({
					    onDayClick: function ($el, $contentEl, dateProperties) {

					        if ($contentEl.length > 0) {
					            showEvents($contentEl, dateProperties);
					        }

					    },
					    caldata: codropsEvents,
					    displayWeekAbbr: true
					}),
					$month = $('#custom-month').html(cal.getMonthName()),
					$year = $('#custom-year').html(cal.getYear());

		        $('#custom-next').on('click', function () {
		            cal.gotoNextMonth(updateMonthYear);
		        });
		        $('#custom-prev').on('click', function () {
		            cal.gotoPreviousMonth(updateMonthYear);
		        });

		        function updateMonthYear() {
		            $month.html(cal.getMonthName());
		            $year.html(cal.getYear());
		        }

		        // just an example..
		        function showEvents($contentEl, dateProperties) {

		            hideEvents();

		            var $events = $('<div id="custom-content-reveal" class="custom-content-reveal"><h4>Events for ' + dateProperties.monthname + ' ' + dateProperties.day + ', ' + dateProperties.year + '</h4></div>'),
						$close = $('<span class="custom-content-close"></span>').on('click', hideEvents);

		            $events.append($contentEl.html(), $close).insertAfter($wrapper);

		            setTimeout(function () {
		                $events.css('top', '0%');
		            }, 25);

		        }
		        function hideEvents() {

		            var $events = $('#custom-content-reveal');
		            if ($events.length > 0) {

		                $events.css('top', '100%');
		                Modernizr.csstransitions ? $events.on(transEndEventName, function () { $(this).remove(); }) : $events.remove();

		            }

		        }

		    });
		</script>
    </form>
</body>
</html>
